<template>
    <div class="control-btns">
        <el-button @click="$emit('selectVideo')">
            {{ '上传视频' }}
        </el-button>
        <el-button @click="$emit('upLoadFont')"> {{ '上传字体' }} </el-button>
        <el-button @click="$emit('upLoadImage')"> {{ '上传贴图' }} </el-button>
        <el-button @click="$emit('upLoadImage')"> {{ '上传字幕' }} </el-button>
        <VideoLower :obj="obj"></VideoLower>
        <VideoSlice :obj="obj"></VideoSlice>
        <VideoAddFrame :obj="obj"></VideoAddFrame>
        <el-button
            style="margin: 6px"
            @click="btnsStatus.addText = true"
            type="primary"
        >
            {{ '添加文字' }}
        </el-button>
        <VideoAddText :obj="obj"></VideoAddText>
        <VideoAddImage :obj="obj"></VideoAddImage>
        <VideoAddSubtitle :obj="obj"></VideoAddSubtitle>
        <el-button @click="$emit('downloadVideo')" type="primary">
            {{ '下载视频' }}
        </el-button>
        <!-- <el-button @click="$emit('postVideo')" type="primary">
      {{ '导出视频' }}
    </el-button> -->
    </div>
</template>

<script>
import VideoAddImage from './VideoAddImage.vue'
import VideoAddSubtitle from './VideoAddSubtitle.vue'
import VideoAddText from './VideoAddText.vue'
import VideoAddFrame from './VideoAddFrame.vue'
import VideoLower from './VideoLower.vue'
import VideoSlice from './VideoSlice.vue'
import { btnsStatus } from '../store/ui-status'
export default {
    props:['obj'],
    components: {
        VideoAddImage,
        VideoAddSubtitle,
        VideoAddText,
        VideoAddFrame,
        VideoLower,
        VideoSlice,
    },
    data() {
        return {
            btnsStatus: btnsStatus
        }
    }
}
</script>

<style lang="less" scoped>
.control-btns {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    > button {
        margin: 6px;
    }
}
</style>

<style>
@media (max-width: 600px) {
    .control-btns > button {
        padding: 6px 8px;
    }
}
</style>
